<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css">

</head>
<body>

<br>
<br>
<br>
 <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
   <div class="ur container">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui teal image header" >
           <div class="content">
             注册
           </div>
         </h2>
         <form class="ui large form" method="post" action="#" th:action="@{/doregister}" enctype="multipart/form-data">
           <div class="ui  segment">
             <div class="green-bold">请上传您的头像</div>
             <!--上传头像-->
             <div>
               <span><img th:each="fileName : ${fileNames}" th:src="${fileName}" width="90" height="90"/></span>
             </div>
             <input type="file" name="fileName" value="选择头像">
             <br>
             <br>
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="username" placeholder="用户名">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="nickname" placeholder="昵称">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="password" placeholder="密码">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="password2" placeholder="请确认您的密码">
               </div>
             </div>
             <button class="ui fluid large teal submit button">注   册</button>
           </div>

           <div class="ui error mini message"></div>
           <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">请输入您的信息</div>

         </form>

       </div>
     </div>
   </div>
 </div>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
  $('.ui.form').form({
    fields : {
      username : {
        identifier: 'username',
        rules: [{
          type : 'empty',
          prompt: '请输入用户名'
        }]
      },
      nickname: {
        identifier:'nickname',
        rules: [{
          type : 'empty',
          prompt: '请输入您的昵称'
        }]
      },
      password : {
        identifier: 'password',
        rules: [{
          type : 'empty',
          prompt: '请输入密码'
        }]
      },
      password2 : {
        identifier: 'password2',
        rules: [{
          type : 'empty',
          prompt: '请确认您的密码'
        }]
      }
    }
  });
</script>


<script>
  function clickEffect() {
    let balls = [];
    let longPressed = false;
    let longPress;
    let multiplier = 0;
    let width, height;
    let origin;
    let normal;
    let ctx;
    const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
    const pointer = document.createElement("span");
    pointer.classList.add("pointer");
    document.body.appendChild(pointer);

    if (canvas.getContext && window.addEventListener) {
      ctx = canvas.getContext("2d");
      updateSize();
      window.addEventListener('resize', updateSize, false);
      loop();
      window.addEventListener("mousedown", function(e) {
        pushBalls(randBetween(10, 20), e.clientX, e.clientY);
        document.body.classList.add("is-pressed");
        longPress = setTimeout(function(){
          document.body.classList.add("is-longpress");
          longPressed = true;
        }, 500);
      }, false);
      window.addEventListener("mouseup", function(e) {
        clearInterval(longPress);
        if (longPressed == true) {
          document.body.classList.remove("is-longpress");
          pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
          longPressed = false;
        }
        document.body.classList.remove("is-pressed");
      }, false);
      window.addEventListener("mousemove", function(e) {
        let x = e.clientX;
        let y = e.clientY;
        pointer.style.top = y + "px";
        pointer.style.left = x + "px";
      }, false);
    } else {
      console.log("canvas or addEventListener is unsupported!");
    }


    function updateSize() {
      canvas.width = window.innerWidth * 2;
      canvas.height = window.innerHeight * 2;
      canvas.style.width = window.innerWidth + 'px';
      canvas.style.height = window.innerHeight + 'px';
      ctx.scale(2, 2);
      width = (canvas.width = window.innerWidth);
      height = (canvas.height = window.innerHeight);
      origin = {
        x: width / 2,
        y: height / 2
      };
      normal = {
        x: width / 2,
        y: height / 2
      };
    }
    class Ball {
      constructor(x = origin.x, y = origin.y) {
        this.x = x;
        this.y = y;
        this.angle = Math.PI * 2 * Math.random();
        if (longPressed == true) {
          this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
        } else {
          this.multiplier = randBetween(6, 12);
        }
        this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
        this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
        this.r = randBetween(8, 12) + 3 * Math.random();
        this.color = colours[Math.floor(Math.random() * colours.length)];
      }
      update() {
        this.x += this.vx - normal.x;
        this.y += this.vy - normal.y;
        normal.x = -2 / window.innerWidth * Math.sin(this.angle);
        normal.y = -2 / window.innerHeight * Math.cos(this.angle);
        this.r -= 0.3;
        this.vx *= 0.9;
        this.vy *= 0.9;
      }
    }

    function pushBalls(count = 1, x = origin.x, y = origin.y) {
      for (let i = 0; i < count; i++) {
        balls.push(new Ball(x, y));
      }
    }

    function randBetween(min, max) {
      return Math.floor(Math.random() * max) + min;
    }

    function loop() {
      ctx.fillStyle = "rgba(255, 255, 255, 0)";
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < balls.length; i++) {
        let b = balls[i];
        if (b.r < 0) continue;
        ctx.fillStyle = b.color;
        ctx.beginPath();
        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
        ctx.fill();
        b.update();
      }
      if (longPressed == true) {
        multiplier += 1;
      } else if (!longPressed && multiplier >= 0) {
        multiplier -= 0.4;
      }
      removeBall();
      requestAnimationFrame(loop);
    }

    function removeBall() {
      for (let i = 0; i < balls.length; i++) {
        let b = balls[i];
        if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
          balls.splice(i, 1);
        }
      }
    }
  }
  clickEffect();//调用特效函数
</script>


<!--点击特效Begin-->
<script>
  (function () {
    var a_idx = 0;
    window.onclick = function (event) {
      var a = new Array("(๑◕ܫ￩๑)b","╮(๑•́ ₃•̀๑)╭"," (｡◕ฺˇε ˇ◕ฺ｡）","(ฅ′ω`ฅ)","♪（＾∀＾●）ﾉｼ","  ˶⚈Ɛ⚈˵ ",
              " (╬￣皿￣)凸","ʅ（′◔౪◔）ʃ","ヾ(o◕∀◕)ﾉ ","♥(｡￫v￩｡)♥");

      var heart = document.createElement("b"); //创建b元素
      heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

      document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
      a_idx = (a_idx + 1) % a.length;
      heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

      var f = 16, // 字体大小
              x = event.clientX - f / 2, // 横坐标
              y = event.clientY - f, // 纵坐标
              c = randomColor(), // 随机颜色
              a = 1, // 透明度
              s = 1.2; // 放大缩小

      var timer = setInterval(function () { //添加定时器
        if (a <= 0) {
          document.body.removeChild(heart);
          clearInterval(timer);
        } else {
          heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                  c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                  s + ");";

          y--;
          a -= 0.016;
          s += 0.002;
        }
      }, 15)

    }
    // 随机颜色
    function randomColor() {

      return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
              .random() * 255)) + ")";

    }
  }());
</script>
<!--点击特效End-->


<!--樱花特效Begin-->
<script>
  let stop, staticx;
  const img = new Image();
  img.src = "";

  function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn;
  }

  Sakura.prototype.draw = function (cxt) {
    cxt.save();
    const xc = 40 * this.s / 4;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
    cxt.restore();
  }

  Sakura.prototype.update = function () {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
      this.r = getRandom('fnr');
      if (Math.random() > 0.4) {
        this.x = getRandom('x');
        this.y = 0;
        this.s = getRandom('s');
        this.r = getRandom('r');
      } else {
        this.x = window.innerWidth;
        this.y = getRandom('y');
        this.s = getRandom('s');
        this.r = getRandom('r');
      }
    }
  }

  SakuraList = function () {
    this.list = [];
  }
  SakuraList.prototype.push = function (sakura) {
    this.list.push(sakura);
  }
  SakuraList.prototype.update = function () {
    let i = 0, len = this.list.length;
    for (; i < len; i++) {
      this.list[i].update();
    }
  }
  SakuraList.prototype.draw = function (cxt) {
    let i = 0, len = this.list.length;
    for (; i < len; i++) {
      this.list[i].draw(cxt);
    }
  }
  SakuraList.prototype.get = function (i) {
    return this.list[i];
  }
  SakuraList.prototype.size = function () {
    return this.list.length;
  }

  function getRandom(option) {
    let ret, random;
    switch (option) {
      case 'x':
        ret = Math.random() * window.innerWidth;
        break;
      case 'y':
        ret = Math.random() * window.innerHeight;
        break;
      case 's':
        ret = Math.random();
        break;
      case 'r':
        ret = Math.random() * 6;
        break;
      case 'fnx':
        random = -0.5 + Math.random();
        ret = function (x, y) {
          return x + 0.5 * random - 1.7;
        };
        break;
      case 'fny':
        random = 1.5 + Math.random() * 0.7
        ret = function (x, y) {
          return y + random;
        };
        break;
      case 'fnr':
        random = Math.random() * 0.03;
        ret = function (r) {
          return r + random;
        };
        break;
    }
    return ret;
  }

  function startSakura() {

    requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame;
    let canvas = document.createElement('canvas'),
            cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
    canvas.setAttribute('id', 'canvas_sakura');
    document.getElementsByTagName('body')[0].appendChild(canvas);
    cxt = canvas.getContext('2d');
    const sakuraList = new SakuraList();
    for (let i = 0; i < 50; i++) {
      let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;
      randomX = getRandom('x');
      randomY = getRandom('y');
      randomR = getRandom('r');
      randomS = getRandom('s');
      randomFnx = getRandom('fnx');
      randomFny = getRandom('fny');
      randomFnR = getRandom('fnr');
      sakura = new Sakura(randomX, randomY, randomS, randomR, {
        x: randomFnx,
        y: randomFny,
        r: randomFnR
      });
      sakura.draw(cxt);
      sakuraList.push(sakura);
    }
    stop = requestAnimationFrame(function () {
      cxt.clearRect(0, 0, canvas.width, canvas.height);
      sakuraList.update();
      sakuraList.draw(cxt);
      stop = requestAnimationFrame(arguments.callee);
    })
  }

  window.onresize = function () {
    const canvasSnow = document.getElementById('canvas_sakura');
    canvasSnow.width = window.innerWidth;
    canvasSnow.height = window.innerHeight;
  }

  img.onload = function () {
    startSakura();
  }

  function stopp() {
    if (staticx) {
      const child = document.getElementById("canvas_sakura");
      child.parentNode.removeChild(child);
      window.cancelAnimationFrame(stop);
      staticx = false;
    } else {
      startSakura();
    }
  }
</script>


</body>
</html>